<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="../../Public/css/mui.min.css">
    <link rel="stylesheet" href="../../Public/fonts/iconfont.css">
    <link rel="stylesheet" href="../../Public/css/global.css">
    <link rel="stylesheet" href="../css/livestu.css">
</head>
<body class="bg-whtie">
<div class="scroll-tab">
    <ul class="tab-nav purchased-nav">
        <li class="tn-active">系列课</li>
        <li>话题</li>
        <li>VIP</li>
    </ul>
</div>
<div class="mui-content bg-whtie purchased-content">
    <div class="tab-content tc-active">
        <ul class="mui-table-view hot-cell">
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            实付：￥21.00
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            购买时间：2017-09-18 10:00:10
                        </p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            实付：￥21.00
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            购买时间：2017-09-18 10:00:10
                        </p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            实付：￥21.00
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            购买时间：2017-09-18 10:00:10
                        </p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            实付：￥21.00
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            购买时间：2017-09-18 10:00:10
                        </p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="nolist">
            <img src="../images/no-list.png">
            <p class="text-16 m-t">暂无购买记录</p>
        </div>
    </div>
    <div class="tab-content">VIP</div>
</div>
<div class="mui-bar mui-bar-tab mui-live-tab">
    <a href="index.html" class="mui-tab-item">
        <span class="iconfont icon-shouye"></span>
        <span class="mui-tab-label mui-block text-mini">首页</span>
    </a>
    <a href="dynamic.html" class="mui-tab-item">
        <span class="iconfont icon-dongtai"></span>
        <span class="mui-tab-label mui-block text-mini">动态</span>
    </a>
    <a href="javascript:void(0);" class="mui-tab-item mui-active">
        <span class="iconfont icon-zhuanlandingyue"></span>
        <span class="mui-tab-label mui-block text-mini">已购</span>
    </a>
    <a href="usercenter.html" class="mui-tab-item">
        <span class="iconfont icon-wode"></span>
        <span class="mui-tab-label mui-block text-mini">我的</span>
    </a>
</div>
</body>
<script src="../../Public/libs/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../../Public/libs/mui.min.js" charset="utf-8"></script>
<script type="text/javascript">
    mui('.mui-bar-tab').on('tap','a',function(){
        location.href = this.getAttribute('href');
    })
    $(function(){
        $('.tab-nav li').on('click',function(){
            var $this = $(this);
            if($this.hasClass('tn-active')){
                return false;
            }else{
                var ind = $this.index();
                $this.siblings('li').removeClass('tn-active');
                $this.addClass('tn-active');
                $('.tab-content').removeClass('tc-active').eq(ind).addClass('tc-active');
            }
        })
    })
</script>
</html>
